<template>
  <div v-if="isVisible" class="dialog-overlay">
    <div class="dialog">
      <div class="left-panel">
        <h3>本地收藏情况</h3>

        <!-- 添加名称和图标输入框 -->
        <div class="name-input-container">
          <label for="folderName">名称</label>
          <div class="input-group" style="
              position: relative;
              display: flex;
              align-items: center;
              width: 90%;
              align-items: center;
            ">
            <!-- 输入框内部显示图标 -->
            <input id="folderName" v-model="userUrlName" placeholder="请输入自定义网页名称"
              style="padding-left: 50px; border: 2px solid #0fb264" />
            <span class="folder-icon" style="position: absolute; left: 20px">
              <img src="https://weishi.360.cn/favicon.ico" alt="360 Icon" class="folder-icon-img"
                style="width: 20px; height: 20px" />
            </span>
          </div>
        </div>

        <div class="folder-content-container">
          <!-- 左侧收藏夹列表 -->
          <div class="folder-list">
            <p class="folder-title">文件夹</p>
            <ul class="bookmark-list">

              <!-- 显示已有的文件夹 -->
              <li v-for="(folder, index) in folders" :key="index">
                <div @click="selectFolder(index)" :class="{
                  'selected-folder': selectedFolderIndex === index
                }">
                  {{ folder.favoriteName }}
                </div>
              </li>
            </ul>

            <!-- 新建文件夹按钮 -->

          </div>

          <!-- 右侧收藏夹内容 -->
          <div class="folder-details">
            <p class="folder-title">收藏夹内容</p>
            <ul class="bookmark-list">
              <li v-for="(item, index) in folders[selectedFolderIndex == null ? 0 : selectedFolderIndex]?.favUrls"
                :key="index" class="bookmark-item">
                <a :href="item.url" target="_blank" @mouseover="hoveredUrl = item.url" @mouseleave="hoveredUrl = null"
                  class="bookmark-link">
                  {{ item.favUrlName }}
                </a>
                <span v-if="hoveredUrl === item.url" class="hover-url">{{ item.url }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="button-container">
          <a @click="confirmBookmark2" class="confirm-button-1">添加</a>
          <a @click="closeDialog" class="cancel-button-1">取消</a>
        </div>
      </div>

      <div class="right-panel">
        <h3>AI智能收藏夹</h3>
        <p>基于本地收藏夹，本网页为您推荐如下收藏夹：</p>
        <p v-if="showSuccessMessage" class="success-message">收藏成功！</p>
        <!-- 推荐收藏名称和推荐放入收藏夹 -->
        <div v-if="aiRecommendedData.isloading">
          <div v-if="aiRecommendedData.isloading" class="loading-container">
            <div class="loading-spinner large"></div> <!-- 选择加载指示器的尺寸 -->
            <p class="loading-message">正在为您智能推荐，请稍等</p>
          </div>
        </div>
        <div v-else class="ai-recommendation">
          <p>
            推荐收藏名称:
            <span class="recommendation-highlight">{{ aiRecommendedData.name }}</span>
          </p>
          <p>
            推荐放入的收藏夹:
            <span class="recommendation-highlight">{{ aiRecommendedData.favName }}</span>
          </p>
          <div class="action-links">
            <a @click="confirmBookmark" class="confirm-link">确认收藏</a>
            |
            <a @click="closeDialog" class="cancel-link">取消收藏</a>
          </div>
        </div>
        <!-- 如果正在创建新文件夹，显示输入框 -->
        <div v-if="isCreatingNewFolder">
          <div class="new-folder-input">
            <input v-model="editedFolderName" placeholder="请输入文件夹名称" />
          </div>
          <div class="new-folder-input">
            <input v-model="editedFolderDescription" placeholder="请输入收藏夹描述，我们将据此为您智能推荐整理" @blur="submitFolderEdit"
              @keyup.enter="submitFolderEdit" />
          </div>
        </div>
        <div class="new-folder-button1">
          <a href="javascript:void(0);" @click="startNewFolder">+ 新建文件夹</a>
        </div>

        <!-- 关闭弹窗按钮，右上角的 × -->
        <button @click="closeDialog" class="close-btn btn btn-link">×</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue'
import * as favApi from '@/api/favorite/favorite'
import { FavListApiModel, Favorite } from '@/type/favorite/favorite';
import { useRoute } from 'vue-router';
const route = useRoute();
// 接收父组件传递的弹窗状态
const props = defineProps<{
  isVisible: boolean,
  isFavorite: boolean

}>()
// 定义事件发射器
const emit = defineEmits<{
  (event: 'close'): void,
  (event: 'update:isFavorite', value: boolean): void;
}>()

function updateFavorite(value: boolean) {
  emit('update:isFavorite', value);
}


favApi.favoriteList().then((res) => {
  updateFolders((res as unknown as FavListApiModel).favorites)
})



// 数据和方法
const userUrlName = ref('')


const folders = ref<Favorite[]>([{
  favoriteId: "",
  favoriteName: "默认收藏夹",
  description: "默认收藏夹",
  favUrls: []
}
])


const selectedFolderIndex = ref<number | null>(0)
const editedFolderName = ref('')
const editedFolderDescription = ref('')
const isCreatingNewFolder = ref(false)
const hoveredUrl = ref<string | null>(null)
import { showErrMsg } from '@/utils/message'

const aiRecommendedData = ref({
  name: '',
  url: route.query.url as string,
  favId: '',
  favName: '',
  isloading: true,
})

favApi.getAgentRes({ url: route.query.url as string }).then(
  (res) => {
    const tmp = (res as unknown as { favoriteId: string, favUrlName: string, favName: string })
    aiRecommendedData.value.favId = tmp.favoriteId
    aiRecommendedData.value.name = tmp.favUrlName
    aiRecommendedData.value.favName = tmp.favName
    aiRecommendedData.value.isloading = false
  }
).catch(
  (err) => {
    aiRecommendedData.value.isloading = false
  }
)


const showSuccessMessage = ref(false)

function updateFolders(favs: Favorite[]) {
  folders.value = favs
}

// 控制弹窗显示/隐藏的逻辑
function showMessage() {
  showSuccessMessage.value = true
  setTimeout(() => {
    showSuccessMessage.value = false
  }, 5000) // 显示2秒后消失
}



const closeDialog = () => {
 favApi.removeUrl(route.query.url as string).then(
      (res) =>{
        if (!(res as unknown as {res:boolean}).res){
          showErrMsg("取消收藏失败，请重试")
        }
      }
    ).catch((err) =>{
      showErrMsg("取消收藏失败，请重试")
    })

  emit('close')
}

// 修改选择文件夹的方法，使用点击切换
const selectFolder = (index: number) => {
  if (index === folders.value.length) {
    // 如果点击的是“新建文件夹”，开始新建文件夹操作
    startNewFolder()
  } else {
    selectedFolderIndex.value = index
    isCreatingNewFolder.value = false
    const selectedFolder = folders.value[index]
    editedFolderName.value = selectedFolder.favoriteName
    editedFolderDescription.value = selectedFolder.description || ''
  }
}

const startNewFolder = () => {
  isCreatingNewFolder.value = true
  editedFolderName.value = '' // 默认设置为“新建文件夹”
  editedFolderDescription.value = '' // 可选：如果需要，可以初始化描述
}

const submitFolderEdit = () => {
  if (isCreatingNewFolder.value) {
    if (editedFolderName.value.trim() !== '') {
      favApi.addFav({ favoriteName: editedFolderName.value.trim(), description: editedFolderDescription.value.trim() }).then(
        (res) => {
          if (!(res as unknown as { res: boolean }).res) {
            alert("创建文件夹失败，请重试")
          } else {
            favApi.favoriteList().then((res) => {
              updateFolders((res as unknown as FavListApiModel).favorites)
              selectedFolderIndex.value = folders.value.length - 1
            })
          }
        }
      ).catch((err) => {
        alert(err)
      })
    }
  } else if (selectedFolderIndex.value !== null) {
    // 编辑现有文件夹
    const folder = folders.value[selectedFolderIndex.value]
    folder.favoriteName = editedFolderName.value.trim()
    folder.description = editedFolderDescription.value.trim()
  }
  // 结束新建文件夹或编辑模式
  isCreatingNewFolder.value = false
}

const confirmBookmark = () => {

  if (aiRecommendedData.value.favId != '') {
    favApi.addFavUrl({ favUrlName: aiRecommendedData.value.name, favoriteId: aiRecommendedData.value.favId, url: route.query.url as string }).then((res) => {
      if ((res as unknown as { res: boolean }).res) {
        updateFavorite(true)
        showSuccessMessage.value = true
        favApi.favoriteList().then((res) => {
          updateFolders((res as unknown as FavListApiModel).favorites)
        })
        // 在2秒后自动隐藏成功消息
        setTimeout(() => {
          showSuccessMessage.value = false
        }, 2000)
      }
    }).catch((err) => {
      alert(err)
    })
  }
}

const confirmBookmark2 = () => {
  // 检查输入的名称是否为空并且是否选择了文件夹
  if (userUrlName.value.trim() !== '' && selectedFolderIndex.value !== null) {
    // 获取当前选中的文件夹
    const folder = folders.value[selectedFolderIndex.value]
    // 如果找到了文件夹
    if (folder) {
      // 将新的书签项添加到该文件夹的 `items` 数组中
      // folder.favUrls.push({
      //   // favUrlName: aiRecommendedData.value.name, // 书签名称
      //   // url: aiRecommendedData.value.url // 书签链接
      // })
      favApi.addFavUrl({ favUrlName: userUrlName.value, favoriteId: folder.favoriteId, url: route.query.url as string }).then((res) => {
        if ((res as unknown as { res: boolean }).res) {
          showSuccessMessage.value = true
          favApi.favoriteList().then((res) => {
            updateFolders((res as unknown as FavListApiModel).favorites)
          })

          // 在2秒后自动隐藏成功消息
          setTimeout(() => {
            showSuccessMessage.value = false
          }, 2000)
        }else{
          showErrMsg(res as unknown as string)
        }
      }).catch((err) => {
        alert(err)
      })
    }
  } else {
    // 如果没有选择文件夹或书签名称为空，提示错误
    alert('请填写书签名称并选择一个文件夹')
  }
  favApi.isFav(route.query.url as string).then((res) =>{
    updateFavorite((res as unknown as {res:boolean}).res)
})
 
}
</script>








<style scoped>
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础加载指示器样式 */
.loading-spinner {
  border: 2.5px solid rgba(0, 0, 0, 0.1); /* 边框颜色 */
  border-radius: 50%;
  border-top: 2.5px solid #3498db; /* 旋转的颜色 */
  width: 20px; /* 缩小尺寸 */
  height: 20px;
  animation: spin 1s linear infinite; /* 动画持续时间和速度曲线 */
  margin: auto; /* 水平居中 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 响应式加载指示器 */
.loading-spinner.small {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

.loading-spinner.large {
  width: 50px;
  height: 50px;
  border-width: 6px;
}

/* 其他颜色的加载指示器 */
.loading-spinner.green {
  border-top-color: #2ecc71;
  /* 绿色 */
}

.loading-spinner.red {
  border-top-color: #e74c3c;
  /* 红色 */
}

.loading-spinner.blue {
  border-top-color: #3498db;
  /* 蓝色 */
}

/* 包含加载指示器的容器 */
.loading-container {
  text-align: center;
  /* 确保文本居中 */
  padding: 20px;
  /* 增加一些内边距 */
}

/* 正在为您智能推荐，请稍等 */
.loading-message {
  font-style: italic;
  color: #666;
  /* 灰色文字 */
  font-size: 16px;
  /* 文字大小 */
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* .dialog 类: 对话框容器样式 */
.dialog {
  background: white;
  /* 背景色设为白色 */
  padding: 20px;
  /* 内边距设为 20px，确保内容与边框之间有间隙 */
  border-radius: 8px;
  /* 圆角，设置为 8px 使边缘更加圆滑 */
  width: 900px;
  /* 固定宽度为 900px */
  max-height: 80%;
  /* 最大高度为视口高度的 80%，防止对话框过大 */
  display: flex;
  /* 使用 flexbox 布局 */
  flex-direction: row;
  /* 设置为行方向布局，左右排列 */
  gap: 20px;
  /* 设置左右元素间距为 20px */
}

/* .left-panel 类: 左侧面板的样式 */
.left-panel {
  width: 55%;
  /* 左侧面板宽度占总对话框宽度的 55% */
  display: flex;
  /* 使用 flexbox 布局 */
  flex-direction: column;
  /* 垂直排列元素 */
  max-height: 100%;
  /* 最大高度为 60%，防止内容过长 */
  padding: 0 10px;
  /* 水平方向内边距为 10px，确保内容与边框之间有适当间隙 */
}

.folder-content-container {
  display: flex;
  /* 使用 flexbox 布局 */
  gap: 20px;
  /* 左右元素之间的间距为 20px */
  margin-top: 10px;
  /* 顶部外边距为 10px */
  max-height: 70%;
  /* 最大高度为 70% */
  overflow: auto;
  /* 内容溢出时出现滚动条 */
}

/* .folder-list 类: 文件夹列表的样式 */
.folder-list {
  width: 50%;
  /* 文件夹列表宽度占父容器的 50% */
  overflow: auto;
  /* 内容溢出时出现滚动条 */
  max-height: 100%;
  /* 最大高度为 100%，允许根据内容高度动态调整 */
  position: relative;
  /* 允许绝对定位的元素相对于此容器定位 */
  margin-top: 0%;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  /* 设置垂直滚动条宽度 */
  height: 6px;
  /* 设置横向滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* 浅灰色背景 */
  border-radius: 10px;
  /* 圆角效果 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  /* 半透明黑色 */
  border-radius: 10px;
  /* 圆角效果 */
}

/* 鼠标悬停时，滚动条滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  /* 更深的颜色 */
}

/* 文件夹标题样式 */
.folder-title {
  font-weight: bold;
  /* 设置文件夹标题文字加粗 */
  margin-bottom: 10px;
  /* 在标题和下方内容之间留出 10px 的间距 */
  background-color: white;
  /* 设置背景颜色为白色 */
  position: sticky;
  /* 设置为粘性定位，使其在滚动时固定在视窗顶部 */
  top: 0;
  /* 设置粘性定位元素距离顶部的偏移量为 0，意味着粘住顶部 */
  padding: 10px 0;
  /* 设置上下内边距为 10px，左右为 0，确保标题不显得拥挤 */
  z-index: 1;
  /* 设置堆叠顺序为 1，确保标题在其他内容之上，避免被遮挡 */
}

/* 文件夹列表的 ul 元素样式 */
.folder-list ul {
  list-style: none;
  /* 去掉默认的列表样式（例如圆点或数字标记） */
  padding-left: 0;
  /* 去除左边的内边距，确保列表项和容器边缘对齐 */
}

/* 每个文件夹列表项的样式 */
.folder-list li {
  margin-bottom: 10px;
  /* 设置每个文件夹项下方的间距为 10px */
}

/* 新建文件夹按钮的容器样式 */
.new-folder-button1 {
  position: sticky;
  /* 设置为粘性定位，使按钮在页面滚动时固定位置 */
  bottom: 0;
  /* 设置粘性定位元素距离底部的偏移量为 0，意味着粘住底部 */
  padding-top: 10px;
  /* 为按钮容器顶部添加 10px 的内边距 */
  background: white;
  /* 设置背景颜色为白色，使按钮容器背景清晰 */
}

/* 设置绿色文字并去除下划线 */
.new-folder-button1 a {
  color: #19b955;
  /* 设置按钮文字颜色为绿色 */
  text-decoration: none;
  /* 去除按钮的下划线 */
}

.folder-details {
  width: 60%;
  overflow: auto;
  max-height: 100%;
}

.bookmark-list {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* 鼠标悬停时显示为手形光标 */
}

.bookmark-item {
  margin-bottom: 10px;
  position: relative;
}

.bookmark-link {
  text-decoration: none;
  color: #19b955;
}

.bookmark-link:hover {
  text-decoration: underline;
}

.hover-url {
  position: absolute;
  bottom: 120%;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  transform: translateY(-10px);
  z-index: 2;
  width: max-content;
}

.right-panel {
  width: 52%;
  display: flex;
  max-height: 100%;
  flex-direction: column;
  gap: 15px;
  padding: 0 10px;
}

.ai-recommendation {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.recommendation-highlight {
  font-weight: bold;
  color: #19b955;
}

.action-links {
  margin-top: 10px;
}

.action-links a {
  color: #19b955;
  text-decoration: none;
  cursor: pointer;
}

.action-links a:hover {
  text-decoration: underline;
}

.success-message {
  position: fixed;
  top: 20px;
  /* 根据需要调整弹窗的位置 */
  transform: translateX(-50%);
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 8px 30px;
  border-radius: 5px;
  z-index: 9999;
  /* 确保弹窗位于页面最上层 */
  opacity: 0;
  animation: fadeInOut 5s ease-in-out;
}

/* 定义动画效果,就是点击缓慢打开弹窗的效果 */
@keyframes fadeInOut {
  20% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }
}

.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button-row {
  display: flex;
  gap: 10px;
}

.folder-select,
input[type='text'] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

.loading-message {
  text-align: center;
  font-style: italic;
}

.ai-info-text {
  font-size: 12px;
  color: #777;
  line-height: 1.5;
  text-align: left;
}

.edit-folder-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6%;
}

.edit-folder-inputs input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1;
}

.edit-folder-inputs button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button {
  background-color: #0fb264;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button:hover {
  background-color: #c82333;
}

.set-button {
  background-color: #ffc107;
  color: black;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.right-panel {
  position: relative;
  padding: 2%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.left-panel {
  position: relative;
  padding: 2%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.close-btn:hover {
  color: #c82333;
  transform: scale(1.2);
  text-shadow: 0 0 10px rgba(238, 37, 37, 0.5);
}

.close-btn:focus {
  outline: none;
}

/* 新建文件夹的输入框容器 */
.new-folder-input {
  display: flex;
  /* 使用flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  width: 100%;
  /* 容器宽度占满父元素 */
  margin: 10px 0;
  /* 上下间距 */
  margin-left: auto;
  /* 水平居中容器 */
  margin-right: auto;
  /* 水平居中容器 */
}

/* 输入框样式 */
.new-folder-input input {
  width: 100%;
  /* 输入框宽度占满容器 */
  padding: 8px;
  /* 内边距 */
  font-size: 14px;
  /* 字体大小 */
  height: 30px;
  /* 输入框高度 */
  border: 2px solid #0fb264;
  /* 边框颜色 */
  border-radius: 4px;
  /* 圆角边框 */
  box-sizing: border-box;
  /* 包含内边距和边框的宽度 */
  text-align: center;
  /* 文字居中 */
}

/* 本地收藏情况输入框容器 */
.name-input-container {
  margin-bottom: 5px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 水平居中 */
}

.name-input-container label {
  margin-right: 10px;
  font-weight: bold;
  flex-shrink: 0;
}

/* 输入框和图标组合 */
.input-group {
  display: flex;
  align-items: center;
}

.input-group .folder-icon {
  font-size: 18px;
  margin-right: 8px;
}

.input-group input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  flex: 1;
  font-size: 14px;
}

/* 文件夹列表和右侧内容的样式保持不变 */

.folder-title {
  font-weight: bold;
  margin-bottom: 10px;
}

/* 被选中文件夹项的样式 */
/* 被选中文件夹项的样式 */
.selected-folder {
  background: linear-gradient(135deg, #81c784, #4caf50);
  /* 渐变背景色，呈现绿色过渡 */
  border-radius: 8px;
  /* 圆角效果 */
  width: 80%;
  /* 设置宽度为父容器的80% */
  font-weight: bold;
  /* 字体加粗 */
  color: white;
  /* 字体颜色为白色 */
  text-align: center;
  /* 水平居中 */
  cursor: pointer;
  /* 鼠标悬停时显示为手形光标 */

  /* 使用flex布局来居中文本 */
  display: flex;
  /* 启用 flexbox 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */

  /* 初始状态 */
  transform: scale(0.9) translateY(-1px);
  /* 初始状态轻微缩小并略微上浮 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果，制造浮动感 */

  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease-in-out,
    box-shadow 0.5s ease-out;
  /* 添加平滑过渡效果 */

  margin: 0px auto;
  /* 自动上下间距，左右居中 */
  padding: 4px 0;
  /* 为文件夹项添加一些内边距 */
  box-sizing: border-box;
  /* 确保 padding 不会影响整体宽度 */
}

/* 被选中时的效果 */
.selected-folder.selected {
  transform: scale(1) translateY(0);
  /* 选中时恢复到100%大小，并浮动到原位置 */
}

/* 文件夹内容展开时不造成波动 */
.folder-wrapper {
  position: relative;
}

/* 文件夹内容展开时不造成波动 */
.folder-wrapper {
  position: relative;
}

.bookmark-link {
  text-decoration: none;
  color: #333;
}

.bookmark-link:hover {
  color: #19b955;
}

.hover-url {
  display: block;
  font-size: 12px;
  color: #888;
}

/* 按钮容器，使用 flex 布局让按钮左右排版 */
.button-container {
  position: absolute;
  /* 使容器固定在父元素的右下角 */
  bottom: 10px;
  /* 离父元素底部的距离 */
  right: 20px;
  /* 离父元素右侧的距离 */
  display: flex;
  justify-content: space-between;
  /* 水平左右分布 */
  gap: 10px;
  /* 按钮之间的间距 */
}

/* 添加按钮的样式 */
.confirm-button-1 {
  display: inline-block;
  padding: 5px 20px;
  /* 更小的内边距 */
  background-color: #0fb264;
  color: white;
  font-weight: bold;
  font-size: 15px;
  /* 更小的字体 */
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  /* 更小的圆角 */
  border: none;
  transition: background-color 0.3s ease;
}

.confirm-button-1:hover {
  background-color: #0fb264;
}

/* 取消按钮的样式 */
.cancel-button-1 {
  display: inline-block;
  padding: 5px 20px;
  /* 更小的内边距 */
  background-color: white;
  color: black;
  font-weight: normal;
  font-size: 15px;
  /* 更小的字体 */
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  /* 更小的圆角 */
  border: 1px solid #ccc;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cancel-button-1:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
}
</style>